<template>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="
      (res, file) => {
        handleAvatarSuccess(item, res, file)
      }
    "
    :before-upload="beforeAvatarUpload"
    @click.stop
  >
    <img v-if="item.img" :src="item.img" class="avatar" />
    <!-- <span slot="tip" class="avatar_text">上传图片</span> -->
    <slot name="tip" v-else>
      <span class="avatar_text">上传图片</span>
    </slot>

    <i class="el-icon-plus close_upload"></i>
  </el-upload>
</template>

<script>
export default {
  name: 'FaccToFaceElUpload',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {
    handleAvatarSuccess (item, res, file) {
      item.img = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload () {

    }
  }
}
</script>

<style lang="scss">
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin-left: 10px;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar {
    width: 100px;
    height: 60px;
    display: block;
  }
  .el-icon-plus {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
    height: 18px;
    line-height: 18px;
    transform: translate(50%, -50%);
    &::before {
      content: "\e78d";
    }
  }
  .avatar_text {
    font-size: 14px;
  }
}
</style>
